<template>
  <a-form
  style="max-width: 480px; margin: 0 auto"
  label-align="left"
  auto-label-width
  :model="form"
  @submit="login"
  size="large"
>
  <a-form-item field="userAccount" label="账号">
    <a-input v-model="form.userAccount" placeholder="请输入账号" tooltip="账户不少于 4 位"  :validate-status="usernameStatus" feedback />
  </a-form-item>
  <a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码" :validate-status="passwordStatus" feedback>
    <a-input-password
      v-model="form.userPassword"
      placeholder="请输入密码"
    />
  </a-form-item>
  <a-form-item>
    <a-button
      type="primary" html-type="submit" style="width: 100%"
    >登录</a-button>
  </a-form-item>
</a-form>
</template>

<script setup lang="ts">
import store from "@/store";
import { onMounted, ref } from "vue";

const form = ref({
  userAccount:'',
  userPassword:'',
});
const usernameStatus = ref();
const passwordStatus = ref();
const getUsernameStatus = () => {
  usernameStatus.value = 'validating';
  let userAccount = form.value?.userAccount;
  if (!userAccount) {
    usernameStatus.value = 'error';
    return 0;
  }else if (userAccount.length < 4) {
    usernameStatus.value = 'warning';
    return 0;
  }else if (!store.state.curUser) {
    usernameStatus.value = 'success';
  }
  return 1;
};
const getPasswordStatus = () => {
  passwordStatus.value = 'validating';
  let userPassword = form.value?.userPassword;
  if (!userPassword) {
    passwordStatus.value = 'error';
    return 0;
  }else if (userPassword.length < 8) {
    passwordStatus.value = 'warning';
    return 0;
  }else if (!store.state.curUser) {
    passwordStatus.value = 'success';
  }
  return 1;
};
const login = () => {
  let flag = false;
  if (!getPasswordStatus()) flag = true;
  if (!getUsernameStatus()) flag = true;
  if (flag) return;
  store.dispatch('user/loginUser', form.value);
}
onMounted(() => {
  const curUser = store.state?.user?.curUser;
  form.value.userAccount = curUser.userAccount;
})
</script>

<style scoped>

</style>